import {Form, Input, Modal, Radio, Select} from "antd";
import React, {useEffect} from "react";


type EditModalProps = {
    data: any; // 数据
    visible: boolean; // 是否显示
    handleCancel: () => void; // 取消回调
    requestList: (isEdit?: boolean) => void; // 请求列表回调
};

export default  React.forwardRef((props: any, ref: any) => {
    const {data, visible, handleCancel, requestList} = props;
    // 是否是编辑
    const isEdit = !!data;


    const _handleCancel = () => {
        // 关闭弹窗回调
        handleCancel();
        if(data.id){
            form.resetFields();
        }
    };

    const _handleOk = () => {
        if (requestList) {
            requestList(isEdit);
        }
    };
    const [form] = Form.useForm();

    const onRoleChange = (value: number) => {
        // 角色改变，清空项目
        console.log('onRoleChange', value)

        // form.setFieldsValue({ projectVoList: undefined });
    };

    useEffect(() => {
        if (data?.id) {
            form.setFieldsValue(data);
        }
    }, [data]);

    React.useImperativeHandle(ref, () => ({
        editModal: editModal,
        addModal: addModal,
    }))
    const addModal = async (data: any) => {

    }
    const editModal = async (data: any) => {

    }


    return (
        <Modal
            title={isEdit ? '编辑工作人员' : "新增工作人员"}
            open={visible}
            okText={isEdit ? '保存' : '新增'}
            cancelText={'取消'}
            onCancel={_handleCancel}
            onOk={_handleOk}
        >
            <Form
                form={form}
                initialValues={{
                    status: 0
                }}
                labelCol={{span: 6}} wrapperCol={{span: 16}}>
                <Form.Item
                    label="工作人员姓名"
                    name="nickname"
                    rules={[{required: true, message: '请输入'}]}>
                    <Input maxLength={10} placeholder="请输入"/>
                </Form.Item>
                <Form.Item
                    label="联系方式"
                    name="mobile"
                    // rules={[Rule.inputRequired(), Rule.phoneNumber()]}
                >
                    <Input maxLength={11} placeholder="请输入"/>
                </Form.Item>
                <Form.Item
                    label="所在部门"
                    name="deptId"
                    rules={[{required: true, message: '请选择'}]}>
                    <Select
                        placeholder="请选择"
                        showSearch
                        filterOption={(input, option) =>
                            (option!.children as unknown as string)
                                .toLowerCase()
                                .includes(input.toLowerCase())
                        }>
                        {/* {departments.map((el) => (
              <Select.Option key={el.id} value={el.id}>
                {el.name}
              </Select.Option>
            ))} */}
                    </Select>
                </Form.Item>
                <Form.Item
                    label="关联角色"
                    name="roleId"
                    rules={[{required: true, message: '请选择'}]}>
                    <Select placeholder="请选择" onChange={onRoleChange}>
                        {/* {roles.map((el) => (
              <Select.Option key={el.id} value={el.id}>
                {el.name}
              </Select.Option>
            ))} */}
                    </Select>
                </Form.Item>
                {/* {isShiShi ? (
          <Form.Item label="关联项目" name="projectVoList">
            <Select
              disabled={isSSLeader(roleId)}
              mode="multiple"
              placeholder="请选择"
              showSearch
              filterOption={(input, option) =>
                (option!.children as unknown as string)
                  .toLowerCase()
                  .includes(input.toLowerCase())
              }>
              {projects.map((el) => (
                <Select.Option key={el.id} value={el.id}>
                  {el.name}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
        ) : null} */}
                <Form.Item
                    label="当前状态"
                    name="status"
                    rules={[{required: true, message: '请选择'}]}>
                    <Radio.Group>
                        <Radio value={0}>启用</Radio>
                        <Radio value={1}>禁用</Radio>
                    </Radio.Group>
                </Form.Item>
            </Form>
        </Modal>
    );
})
